	<template>
		<view class="login-box">
			<view class="top-nav">
				<image class="logo" src="../../static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="form">
				<view class="item">
					<view class="label">用户名</view>
					<view class="iptValue">
						<u-icon name="man-add-fill" size="24"></u-icon>
						<input placeholder-style="color:#333;font-size:28rpx;" class="ipt" type="text"
							placeholder="请输入用户名/手机号" v-model="registerForm.ownerPhone">
					</view>
				</view>
				<view class="item">
					<view class="label">密码</view>
					<view class="iptValue">
						<u-icon name="fingerprint" size="24"></u-icon>
						<input placeholder-style="color:#333;font-size:28rpx;" class="ipt" type="password"
							placeholder="请输入密码" v-model="registerForm.wxId">
						<!-- <u-icon name="eye-fill" size="18"></u-icon> -->
						<u-icon name="eye-off" size="18"></u-icon>
					</view>
				</view>
				<!-- 				<view class="item">
					<view class="label">手机号</view>
					<view class="iptValue">
						<u-icon name="phone" size="24"></u-icon>
						<input placeholder-style="color:#333;font-size:28rpx;" class="ipt" type="text" placeholder="请输入手机号"
							v-model="registerForm.ownerPhone">
						<!-- <u-icon name="eye-fill" size="18"></u-icon> -->
				<!-- <u-icon name="eye-off" size="18"></u-icon> -->
				<!-- </view> -->
				<!-- </view> -->
				<view class="item" v-if="false">
					<view class="label">验证码</view>
					<view class="iptValue">
						<u-icon name="grid" size="24"></u-icon>
						<input placeholder-style="color:#333;font-size:28rpx;" class="ipt" type="text"
							placeholder="请输入验证码">
						<u-button type="warning" style="width: 280rpx;height: 70rpx;font-size: 24rpx;border: none;"
							text="获取验证码"></u-button>
					</view>
				</view>
				<view class="item">
					<view class="label" style="margin-bottom: 20rpx;">车牌号</view>
					<input-car @iptValue="iptValue" v-model="registerForm.plateNumber"></input-car>
				</view>
				<view class="btn-tips">
					已有账号？<text class="reg" @tap="toRouter('/pages/login/index')">去登录</text>
				</view>

				<view class="submit" @click="handleRegister">
					立即注册
				</view>

			</view>
		</view>
	</template>

	<script>
		import inputCar from '../../components/input.vue'
		import {
			register
		} from '@/api/mobile/driver.js'
		export default {
			components: {
				inputCar
			},
			data() {
				return {
					value4: false,
					value3: '',
					carId: "",
					registerForm: {
						ownerPhone: "", // 用户名
						plateNumber: "", // 车牌号
						wxId: "" // 密码
					}
				}
			},
			methods: {
				changeBtn() {

				},
				toRouter(item) {
					uni.navigateTo({
						url: item
					})
				},
				iptValue(e) {
					this.carId = e;
					this.registerForm.plateNumber = e; // 新增：同步到表单

				},
				async handleRegister() {
					if (this.registerForm.ownerPhone === "") {
						uni.showToast({
							title: '用户名手机号必填',
							icon: "none"
						})
						return
					}
					if (this.registerForm.wxId === "" || this.registerForm.length < 6) {
						uni.showToast({
							title: '密码需要至少6位数',
							icon: "none"
						})
						return
					}
					if (this.registerForm.plateNumber === "") {
						uni.showToast({
							title: '车牌号不可为空',
							icon: "none"
						})
						return
					}

					if (this.registerForm.wxId === "" || this.registerForm.length < 6) {
						uni.showToast({
							title: '密码需要至少6位数',
							icon: "none"
						})
						return
					}

					try {
						// 用 await 处理异步请求（比 then 更清晰，且能被 try/catch 捕获错误）
						const res = await register(this.registerForm);
						console.log("接口响应：", res);

						if (res.code === 601) {
							// 601 错误（如参数缺失、格式错误）
							uni.showModal({
								title: "系统提示",
								content: res.msg,
								showCancel: false // 只显示“确定”，避免用户误操作
							});
						} else {
							// 注册成功，跳转登录页
							uni.showModal({
								title: "系统提示",
								content: `恭喜你，您的账号 ${this.registerForm.ownerPhone} 注册成功！`,
								// 箭头函数保留 this 指向
								success: (res) => {
									if (res.confirm) {
										this.toRouter('/pages/login/index'); // 现在能正常调用
									}
								}
							});
						}
					} catch (err) {
						// 捕获接口请求失败（如网络错误、后端500错误）
						console.error("注册请求失败：", err);
						uni.showToast({
							icon: "none",
							title: "注册失败，请稍后重试"
						});
					}
				}
			},
			watch: {
				carId(newValue, oldValue) {
					console.log(newValue)
				}
			}
		}
	</script>

	<style lang="scss" scoped>
		.login-box {
			width: 100%;
			min-height: 100vh;
			// background-image: linear-gradient(to bottom, #f2cea5 0%, white 100%);
			// padding-top: 124rpx;
			box-sizing: border-box;
			padding: 124rpx 20rpx 300rpx 20rpx;

			.top-nav {
				width: 100%;

				.logo {
					height: 200rpx;
					width: 300rpx;
				}
			}

			.form {
				width: 100%;
				background: rgba(255, 255, 255, 0.8);
				padding: 40rpx 15rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

				.item {
					width: 100%;
					margin-bottom: 30rpx;

					.label {
						font-size: 28rpx;
						color: #333;
						font-weight: 600;
					}

					.iptValue {
						width: 100%;
						height: 80rpx;
						border: 1rpx solid #eee;
						margin-top: 10rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						padding: 0 14rpx;
						box-sizing: border-box;

						.ipt {
							width: 100%;
							height: 80rpx;
							padding: 0 20rpx;
							box-sizing: border-box;
							border-radius: 10rpx;
							color: #333;
							font-size: 28rpx;

							&::placeholder {
								color: #333;
							}
						}

						&.error {
							border: 1px solid #dd6161;

							.ipt {
								color: #dd6161;
							}
						}
					}

					.error {
						width: 100%;
						font-size: 24rpx;
						margin-top: 5rpx;
						color: #ff0000;
						animation: 0.4s linear errorForm;
					}
				}

				.remember {
					width: 100%;
					font-size: 24rpx;
					color: #333;
					display: flex;
					align-items: center;


					.name {
						margin-left: 10rpx;
					}
				}

				.submit {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #fff;
					background-image: linear-gradient(to right, #ff9900 0%, #fcbd71 100%);
					height: 80rpx;
					border-radius: 10rpx;
					margin-top: 45rpx;
				}

				.btn-tips {
					width: 100%;
					font-size: 28rpx;
					color: #333;
					margin-top: 28rpx;
					text-align: right;

					.reg {
						color: #2979ff;
					}
				}

				.bottom-xy {
					width: 100%;
					font-size: 24rpx;
					color: #666;
					// text-align: center;
					margin-top: 38rpx;
					display: grid;
					grid-template-columns: 1fr 10fr;
					align-items: center;

					.reg {
						color: #2979ff;
					}
				}

				.bottom-box {
					margin-top: 148rpx;

					// background: red;
					.bottom-login {
						display: flex;
						justify-content: space-around;
						align-items: center;
						margin-top: 48rpx;

						.phone {
							height: 64rpx;
							width: 64rpx;
						}
					}
				}

			}

			@keyframes errorForm {
				0% {
					transform: translateX(-5rpx);
				}

				25% {
					transform: translateX(5rpx);
				}

				50% {
					transform: translateX(-5rpx);
				}

				75% {
					transform: translateX(5rpx);
				}

				100% {
					transform: translateX(0rpx);
				}
			}
		}
	</style>